<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <title>Kundenkarte: Neue Standorte hinzufügen</title>

	<link type="text/css" 
    	  href="tabs/css/flick/jquery-ui-1.8.16.custom.css" 
          rel="stylesheet" />	
		
        <!-- Geocode Error Management -->
		<script type="text/javascript" 
				src="js/geocodeError.js">
		</script>

		<!-- JQuery -->
		<script type="text/javascript" 
				src="tabs/js/jquery-1.6.2.min.js">
		</script>
        
        <!-- JQuery UI -->
		<script type="text/javascript" 
				src="tabs/js/jquery-ui-1.8.16.custom.min.js">
		</script>
        
        <!-- Fehleranzeige -->
		<script type="text/javascript" 
				src="js/standardError.js">
		</script>
		
        <!-- Accordion -->
		<script type="text/javascript">
			$(function(){
				
				// Icons definieren
				var icons = {
					header: "ui-icon-circle-arrow-e",
					headerSelected: "ui-icon-circle-arrow-s"
				};

				// Accordion initialiseren
				$("#accordion").accordion({ icons: icons, header: "h3" });
				
				// Hover-States
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
				// Tab Neuer Ort --> Löschfunktion deaktivieren
				$('#createPlace_head').click(function(){		
					toggleAdministration(false);
				})
				
				// Tab Administration --> Löschfunktion aktivieren
				$('#administration_head').click(function(){		
					toggleAdministration(true);
				})
				
			});
		</script>
 
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
    	  rel="stylesheet" 
          type="text/css" />
        
    <!-- Google Maps API -->  
	<script type="text/javascript" 
	 		 src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
    </script> 
    
	<script type="text/javascript">
  
  	// Array um alle Datenpunkte abzuspeichern
 	var allMarkers = [];
	
	// Variable um den Zustand der Geocodierung
	// zu speichern
	var geocoded = false;
	
	// Variable zur Speicherung des aktuell
	// ausgewählten Icons
	var globalIcon = "";
	
	// Marker zur Anzeige der Vorschau
	var tempMarker = new google.maps.Marker();
	
	// LatLngBounds Objekt
	var latlngbounds = new google.maps.LatLngBounds();
  
  	var directionDisplay;	
	var directionsService = new google.maps.DirectionsService();
  	
	// Karte
	var map;
	
	// Art des Icons
	var icontype;
	  
    // Definieren der Icons
    var customIcons = {
      massage: {
        icon: './icons/massage.png',
      }, 
	  office: {
        icon: './icons/office.png',
      }, 
	  airport: {
        icon: './icons/airport.png',
      }, 
	  shopping: {
        icon: './icons/shopping.png',
      }, 
	  fitness: {
        icon: './icons/fitness.png',
      },
	  wellness: {
        icon: './icons/wellness.png',
      },
	  hotel: {
        icon: './icons/hotel.png',
      },
	  railway: {
        icon: './icons/railway.png',
      },
	  casino: {
        icon: './icons/casino.png',
      },
	  trash: {
        icon: './icons/trash.png'
      }
    };


    // Runden einer Zahl x auf n Stellen
	function runde(x, n) {
		  if (n < 1 || n > 14) return false;
		  
		  var e = Math.pow(10, n);
		  var k = (Math.round(x * e) / e).toString();
		  
		  if (k.indexOf('.') == -1) 
		  	k += '.';
		  
		  k += e.toString().substring(1);
		  return k.substring(0, k.indexOf('.') + n+1);
	}
	
	
  // Auf externe URL zugreifen
  function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

	  // Readystates abfragen
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          callback(request.responseText, request.status);
        }
      };

	  // Request senden
      request.open('GET', url, true);
      request.send(null);
    }

	// XML Parsen...
    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
		
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }
	
  // Alle in der Datenbank vorhandenen Datenpunkte auf
  // der Karte zur Bearbeitung abbilden
  function getAllMarkers(){
		
	   // Temporären Marker ausblenden
	   tempMarker.setMap(null);
	   
	   // Alle auf der Karte vorhandenen
	   // Marker entfernen
	   removeAllMarkers();

	   // Daten aus der Datenbank laden (XML)
       downloadUrl("getAllMarkers.php", function(data) {
        
		// XML Dokument lesen
		var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
       
	    // Marker nacheinander platzieren
	   	for (var i = 0; i < markers.length; i++) {
	   
			// Längen und Breitengrad extrahieren
		  	var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("map_geoX")),
              parseFloat(markers[i].getAttribute("map_geoY"))
			);
			
			// LatLngBounds um den neuen Punkt erweitern
			latlngbounds.extend(point);
			
			// Kundendaten extrahieren
			var id = markers[i].getAttribute("map_id");
			var geoX = markers[i].getAttribute("map_geoX");
			var geoY = markers[i].getAttribute("map_geoY");
			var type = markers[i].getAttribute("map_type");

	  		// Symbol setzen
			var icon = customIcons[type] || {};
			
			// Marker setzen
          	var marker = new google.maps.Marker({
				map: map,
				position: point,
				icon: icon.icon,
				iconsafe: icon.icon,
				geoX: geoX,
				geoY: geoY,
				type: type,
				id: id
         	});
			
			// Dem Marker die nötigen Ereignislistener
			// mitgeben
			attach(marker);
			
			// Marker in globalem Array speichern
			allMarkers.push(marker);
		
		}
		
      // Die Karte so skalieren, dass alle Marker sichtbar sind 
	  map.fitBounds(latlngbounds);

      });
 
  }

	// Entfernt alle Marker von der Karte
	function removeAllMarkers(){
		 for (var i = 0; i < allMarkers.length; i++){
			 allMarkers[i].setMap(null);
		 }
		 
		 allMarkers = new Array();
	}

	// Ereignislistener an Marker binden
	function attach(marker) {

		 // Ereignislistener: Mouseover
		 // Löschsymbol anzeigen
		 google.maps.event.addListener(marker, 'mouseover', function(event) {
				marker.setIcon("./icons/trash.png");
		 }); 
		  
		 // Ereignislistener: Mouseout
		 // Markersymbol wiederherstellen
		 google.maps.event.addListener(marker, 'mouseout', function(event) {
				marker.setIcon(marker.iconsafe);
		 }); 
		 
		 // Ereignislistener: Klick
		 // Marker aus der Datenbank entfernen
		 google.maps.event.addListener(marker, 'click', function(event) {
				deleteMarker(marker.id);
				removeAllMarkers();
				getAllMarkers();
		 }); 
}

	// Löscht einen Marker anhand seiner
	// ID aus der Datenbank
	function deleteMarker(id){
		
		// Keine ID ausgewählt
		if (id==""){
		  standardError("Es wurde keine entsprechende ID gefunden");
		  return;
		}
		
		// IE7+, Firefox, Chrome, Opera, Safari
		if (window.XMLHttpRequest){
		  xmlhttp=new XMLHttpRequest();
		}
		
		// IE6, IE5 (ältere Browser)
		else{ 
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		xmlhttp.onreadystatechange=function(){
		  if (xmlhttp.readyState==4 && xmlhttp.status==200){
			 standardInfo("Der Kunde wurde aus der Datenbank entfernt");
		  }
		}
		
		// AJAX-Request senden
		xmlhttp.open("GET","deleteMarker.php?id="+id,false);
		xmlhttp.send();
	}
	
	// Aktiviert bzw. Deaktiviert den
	// Administrationsmodus
	function toggleAdministration(mode){
		// Aktivieren --> Alle Marker anzeigen
		if(mode == true){
			getAllMarkers();
		}
		// Deaktivieren --> Alle Marker ausblenden
		else{
			removeAllMarkers();
		}
	}
	
	// Fügt einen neuen Punkt in die 
	// Datenbank eintragen
	function insertGeo(){
		var ajaxRequest;  // The variable that makes Ajax possible!
		
		try{
			// Opera 8.0+, Firefox, Safari
			ajaxRequest = new XMLHttpRequest();
		} catch (e){
			// Internet Explorer Browsers
			try{
				ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try{
					ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e){
					// Es ist ein Fehler aufgetreten
					standardError("Es ist ein Fehler aufgetreten: "+ e);
					return false;
				}
			}
		}
		
		// Readystates abfangen
		ajaxRequest.onreadystatechange = function(){
			if(ajaxRequest.readyState == 4){
				standardInfo("Die Daten wurden eingetragen!");
			}
		}
		
		// Daten aus dem Formular laden
		var geoX = document.getElementById('MAP_posX_hidden').value;
		var geoY = document.getElementById('MAP_posY_hidden').value;
		var type= document.getElementById('MAP_type_hidden').value;
		
		// URL zusammensetzen
		var queryString = "?geoX=" + geoX +
						  "&geoY=" + geoY +
						  "&type=" + type;
		
		try {
			ajaxRequest.open("GET", "insertGeo.php" + queryString, true);
			// AJAX-Request senden
			ajaxRequest.send(null); 
		} catch (e) {
			standardError("Es ist ein Fehler aufgetreten: " + e);
		}
}


	// Die Art des ausgewählten Icons setzen
	function selectIcon(icontype){
		
		// Icon setzen
		globalIcon = customIcons[icontype] || {};
		tempMarker.setIcon(globalIcon.icon);
		
		// Art des Icons in verstecktem
		// Feld abspeichern
		document.getElementById("MAP_type_hidden").value = document.getElementById("MAP_type").value;
		
		// Wenn Geocodierung erfolgreich & Icon gesetzt
		// eintragen von Punkten möglich
		if((geocoded == true) && (icontype != 'none')){
			$('#BTN_db').fadeIn(500);
		}
		else{
			 $('#BTN_db').fadeOut(500);	
		}
			
	}

    // Abfrage ob eine Checkbox angeklickt bzw.
	// nicht angeklckt ist. Je nach Zustand werden die
	// Marker ein bzw. ausgeblendet
  	function boxclick(box,type) {
		if (box.checked) {
		  show(type);
		} else {
		  hide(type);
		}
  	};
	
	// Alle Marker eines bestimmten Typs ausblenen
	function hide(type){
	  for (var i = 0; i < allMarkers.length; i++) {
        if(allMarkers[i].type == type){
		allMarkers[i].setVisible(false);
		}
	  }
  	}
  
    // Alle Marker eines bestimmten Typs einblenden
  	function show(type){
	  for (var i = 0; i < allMarkers.length; i++) {
		if(allMarkers[i].type == type){
        allMarkers[i].setVisible(true);
		}
	  }
  	}

  	// Karte initialisieren
  	function initialize() {
		geocoder = new google.maps.Geocoder();
		directionsDisplay = new google.maps.DirectionsRenderer();
    	
		// Kartenoptionen
		var myOptions = {
		  zoom:15,
		  navigationControl: false,
  		  mapTypeControl: false,
  		  scaleControl: true,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
    	}
		
		// Karte ausgeben
   		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    	directionsDisplay.setMap(map);
		
		// Ort der aktuell im Eingabefeld
		// steht geocodieren
		myGeocode();
		
	}
			
			
	// Funktion die einen Ort geocodiert und Ihn dann mittels
	// eines Markers in der Karte anzeigt
	function myGeocode() {
	
	// Vorschau-Marker von der Karte entfernen
	tempMarker.setMap(null);
	
	// Ort der Codiert werden soll
    var address = document.getElementById("MAP_ort").value;

    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
       
	    // Geocodierung erfolglreich?
	    if (status == google.maps.GeocoderStatus.OK) {
			
		  // Geocodierung ist erfolgreich verlaufen	
		  geocoded = true;
			
		  // Ort kann nur nach erfolgreicher Geocodierung sowie
		  // nach Auswahl einer Kategorie in die Datenbank eingefügt werden
		  if(document.getElementById("MAP_type").selectedIndex != 0){  
			  $('#BTN_db').fadeIn(550);
		  }
		  
		  // Zentrum der Karte auf den gesuchten Ort richten
          map.setCenter(results[0].geometry.location);
		  map.setZoom(12);
		  
		  // Icontyp festlegen
		  var icon = globalIcon;
		  
		  // Marker auf den Ort setzen
          tempMarker = new google.maps.Marker({
              map: map, 
              position: results[0].geometry.location,
			  icon: icon.icon,
			  bouncy: true
          });
		  	  
		  // Objekt um die Koordinaten des Markers zu extrahieren
		  var myLatLng = new google.maps.LatLng();
		  myLatLng = tempMarker.getPosition();
		
		  var myPointX = new google.maps.Point();
		  var myPointY = new google.maps.Point();
		  
		  // Längen und Breitengrad bestimmen
		  myPointX = runde(myLatLng.lat(),6);
		  myPointY = runde(myLatLng.lng(),6);
		    
		  document.getElementById("MAP_posX_hidden").value = myPointX;
		  document.getElementById("MAP_posY_hidden").value = myPointY;
		  //document.getElementById("MAP_ort_hidden").value = ort;
		  
		  document.getElementById("MAP_type_hidden").value = document.getElementById("MAP_type").value;
		  
        } 
		// Es ist ein Fehler aufgetreten
		else {
			 geocodeError(status);	
			 $('#BTN_db').fadeOut(550);
		}
		
      });
    }
  }

</script>

    <link href="css/places.css" 
    	  rel="stylesheet" 
          type="text/css" />
          
    <link href="css/error.css" 
    	  rel="stylesheet" 
          type="text/css" />
          
</head>

<body onload="initialize()">

	<!-- Fehlermeldungen ausgeben -->
	<div id="errorInfo" class="errorInfo">Die Anfrage konnte nicht ausgeführt werden!
    
    </div>
    
    <!-- Informationen ausgeben -->
    <div id="OkInfo" class="OkInfo">Die Anfrage konnte nicht ausgeführt werden!
    
    </div>

    <!-- Platz für die Karte reservieren -->
    <div id="map_canvas" style="width:100%;height:100%;">
    
    </div>
       
    <!-- Control Panel --> 
    <div id="controlPanel" class="controlPanel">
        
        <!-- Accordion Navigation -->
        <div id="accordion">
          
          <!-- CONTENT: Neuer Ort anlegen -->
          <div id="createPlace">
            <h3><a id="createPlace_head" href="#">Neuen Ort in der Datenbank anlegen</a></h3>
          		<div> 
              		<center>
              			  Ort suchen:
                          <br />
                          <input name="MAP_ort" class="inputField" type="text" id="MAP_ort" 
                          value="<?php if(!isset($_GET['MAP_ort'])) {echo "Fachhochschule Kaiserslautern";} else echo $_GET['MAP_ort']; ?>" />
                          <br />
                          <input type="button" class="button" name="btn_geocode" 
                          id="btn_geocode" value="Geokoordinaten ermitteln" onclick="myGeocode();" />
             	    </center>
              
              		<hr />
              
                    <center>
                    	Typ festlegen:
                      	<br />
    
               <select name="MAP_type" size="1" id="MAP_type" class="selectBox">
                      <option value="none" onclick="selectIcon('none');">Auswahl:
                      </option>
       
                      <option value="railway" onclick="selectIcon('railway');">Bahnhof                      
                      </option>
                      
                      <option value="casino"  onclick="selectIcon('casino');">Casino
                      </option>
                      
                      <option value="shopping" onclick="selectIcon('shopping');">Einkaufszentrum
                      </option>
                      
                      <option value="airport" onclick="selectIcon('airport');">Flughafen
                      </option>
                      
                      <option value="office"  onclick="selectIcon('office');" >Firmenzentrale
                      </option>
                      
                      <option value="fitness" onclick="selectIcon('fitness');">Fitness Studio
                      </option>
                      
                      <option value="hotel" onclick="selectIcon('hotel');">Hotel
                      </option>

                      <option value="wellness" onclick="selectIcon('wellness');">Wellness
                      </option>
                      
                      <option value="massage" onclick="selectIcon('massage');">Sonstige
                      </option>

                </select>

                <table border="0" align="center" width="100%">
                    
                   <tr>
                        <td colspan="2" align="center">
                        <input name="BTN_db" type="button" class="button" style="display:none;"
                         id="BTN_db" value="Punkt in der Datenbank ablegen" onclick="insertGeo();" />
                        </td>
                   </tr>
                  
                   <tr>
                        <td>
                            <input type="hidden" name="MAP_posX_hidden" id="MAP_posX_hidden" value="" />
                            <input type="hidden" name="MAP_posY_hidden" id="MAP_posY_hidden" value="" />
                            <input type="hidden" name="MAP_ort_hidden" id="MAP_ort_hidden" value="" />
                            <input type="hidden" name="MAP_type_hidden" id="MAP_type_hidden" value="" />
                       </td>
                  </tr>
             </table>
             <br /><br />
         </div>
                </div>
                
                
                
                <!-- CONTENT: Administrationsmodus -->
                <div id="administration">
                    <h3 id="administration_head"><a href="#">Administrationsmodus</a></h3>
                    <div>
                      <hr />
                      <br />
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'office')" checked="checked"/>
                  <img src="icons/office.png" width="32" height="37">
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'massage')" checked="checked"/>
                  <img src="icons/massage.png" width="32" height="37">
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'casino')" checked="checked"/>
                  <img src="icons/casino.png" width="32" height="37">
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'airport')" checked="checked"/>
                  <img src="icons/airport.png" width="32" height="37">
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'fitness')" checked="checked"/>
                  <img src="icons/fitness.png" width="32" height="37"><br>
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'wellness')" checked="checked"/>
                  <img src="icons/wellness.png" width="32" height="37">
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'shopping')" checked="checked"/>
                  <img src="icons/shopping.png" width="32" height="37">
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'railway')" checked="checked"/>
                  <img src="icons/railway.png" width="32" height="37">
                  <input type="checkbox" id="massageBox" class="checkBox" onClick="boxclick(this,'hotel')" checked="checked"/>
               	  <img src="icons/hotel.png" width="32" height="37">
                    </div>
                </div>
            </div>
            
         </div>

</body>

</html>
